<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人创业者入驻平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        
        html {
            font-size: 13.3333vw; /* 750px设计稿下，100px基准 */
        }
        
        @media screen and (min-width: 750px) {
            html {
                font-size: 100px; /* PC端限制最大字号 */
            }
        }
        
        body {
            font-size: 0.28rem; /* 约28px */
            color: #333;
            line-height: 1.5;
            background-color: #f5f5f5;
        }
        
        .container {
            padding: 0.3rem;
            max-width: 750px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            margin-bottom: 0.4rem;
        }
        
        .header h1 {
            font-size: 0.4rem;
            color: #333;
            margin-bottom: 0.2rem;
        }
        
        .header p {
            color: #666;
            font-size: 0.24rem;
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 0.3rem;
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 0.1rem;
            font-size: 0.32rem;
            margin: 0.4rem 0;
            text-align: center;
            text-decoration: none;
        }
        
        .btn-secondary {
            background-color: #f5f5f5;
            color: #1890ff;
            border: 1px solid #1890ff;
        }
        
        .form-group {
            margin-bottom: 0.3rem;
            background-color: white;
            border-radius: 0.1rem;
            padding: 0.3rem;
        }
        
        .form-group h3 {
            font-size: 0.32rem;
            margin-bottom: 0.2rem;
            color: #333;
        }
        
        label {
            display: block;
            margin-bottom: 0.15rem;
            color: #666;
        }
        
        input[type="text"],
        input[type="tel"],
        input[type="number"],
        input[type="email"],
        select,
        textarea {
            width: 100%;
            padding: 0.2rem;
            border: 1px solid #ddd;
            border-radius: 0.08rem;
            font-size: 0.28rem;
            margin-bottom: 0.2rem;
        }
        
        .upload-area {
            border: 1px dashed #ddd;
            padding: 0.4rem;
            text-align: center;
            border-radius: 0.08rem;
            margin: 0.2rem 0;
            background-color: #fafafa;
        }
        
        .upload-area p {
            color: #999;
            font-size: 0.24rem;
        }
        
        .upload-icon {
            font-size: 0.6rem;
            color: #ccc;
            margin-bottom: 0.1rem;
        }
        
        .rules {
            font-size: 0.24rem;
            color: #999;
            margin: 0.3rem 0;
            line-height: 1.6;
        }
        
        .rules a {
            color: #1890ff;
            text-decoration: none;
        }
        
        .hidden {
            display: none;
        }
        
        .deposit-info {
            background-color: #e6f7ff;
            padding: 0.2rem;
            border-radius: 0.08rem;
            margin: 0.2rem 0;
            font-size: 0.24rem;
            color: #1890ff;
        }
        
        .id-card-group {
            display: flex;
            justify-content: space-between;
        }
        
        .id-card-item {
            width: 48%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>个人创业者平台</h1>
            <p>开启您的创业之旅，与平台共同成长</p>
        </div>
        
        <a href="#" class="btn" id="joinBtn">成为平台从业者</a>
        
        <div id="formContainer" class="hidden">
            <div class="form-group">
                <h3>实名认证</h3>
                <label for="realName">真实姓名</label>
                <input type="text" id="realName" placeholder="请输入您的真实姓名">
                
                <label for="idCard">身份证号码</label>
                <input type="text" id="idCard" placeholder="请输入18位身份证号码">
                
                <label>身份证照片</label>
                <div class="id-card-group">
                    <div class="id-card-item">
                        <div class="upload-area">
                            <div class="upload-icon">+</div>
                            <p>身份证正面</p>
                        </div>
                    </div>
                    <div class="id-card-item">
                        <div class="upload-area">
                            <div class="upload-icon">+</div>
                            <p>身份证反面</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <h3>从业信息</h3>
                <label for="industry">选择行业</label>
                <select id="industry">
                    <option value="">请选择您从事的行业</option>
                    <option value="design">设计创意</option>
                    <option value="tech">技术服务</option>
                    <option value="education">教育培训</option>
                    <option value="consulting">咨询顾问</option>
                    <option value="culture">文化传承</option>
                    <option value="other">其他</option>
                </select>
                
                <label for="serviceScope">服务范围</label>
                <textarea id="serviceScope" rows="3" placeholder="请详细描述您能提供的服务内容"></textarea>
                
                <label for="experience">从业经验(年)</label>
                <input type="number" id="experience" placeholder="请输入您的从业年限" min="0" max="50">
            </div>
            
            <div class="form-group">
                <h3>资质证明</h3>
                <label>相关证书或资质(可选)</label>
                <div class="upload-area">
                    <div class="upload-icon">+</div>
                    <p>点击上传相关证书或资质文件</p>
                </div>
                
                <label>作品集或案例(可选)</label>
                <div class="upload-area">
                    <div class="upload-icon">+</div>
                    <p>点击上传作品集或案例文件</p>
                </div>
            </div>
            
            <div class="form-group">
                <h3>押金信息</h3>
                <div class="deposit-info">
                    根据平台规则，个人从业者需缴纳¥2000押金。审核不通过将原路退回。
                </div>
                <label for="depositAmount">押金金额</label>
                <input type="text" id="depositAmount" value="¥2000" readonly>
            </div>
            
            <div class="rules">
                <input type="checkbox" id="agreeRules"> 我已阅读并同意<a href="#">《平台从业者协议》</a>和<a href="#">《押金管理规定》</a>
            </div>
            
            <button class="btn" id="submitBtn">提交审核</button>
            <button class="btn btn-secondary" id="cancelBtn">取消</button>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const joinBtn = document.getElementById('joinBtn');
            const formContainer = document.getElementById('formContainer');
            const cancelBtn = document.getElementById('cancelBtn');
            const submitBtn = document.getElementById('submitBtn');
            
            // 显示入驻表单
            joinBtn.addEventListener('click', function(e) {
                e.preventDefault();
                formContainer.classList.remove('hidden');
                joinBtn.classList.add('hidden');
            });
            
            // 取消入驻
            cancelBtn.addEventListener('click', function(e) {
                e.preventDefault();
                formContainer.classList.add('hidden');
                joinBtn.classList.remove('hidden');
            });
            
            // 提交审核
            submitBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const realName = document.getElementById('realName').value;
                const idCard = document.getElementById('idCard').value;
                const agreeChecked = document.getElementById('agreeRules').checked;
                
                if(!realName) {
                    alert('请输入真实姓名');
                    return;
                }
                
                if(!idCard || idCard.length !== 18) {
                    alert('请输入有效的18位身份证号码');
                    return;
                }
                
                if(!agreeChecked) {
                    alert('请先阅读并同意平台协议');
                    return;
                }
                
                // 这里可以添加更多表单验证逻辑
                
                alert('您的入驻申请已提交，我们将尽快审核！');
                // 实际应用中这里应该是AJAX提交表单数据
            });
        });
    </script>
</body>
</html>